<template>
  <div style="margin-top: 20px;">
    <el-row :gutter="15">
      <el-form
        ref="searchForm"
        :model="searchData"
        size="medium"
        label-width="100px"
      >
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-autocomplete
              v-model="searchData.name"
              :fetch-suggestions="getNameData"
              placeholder="请输入姓名"
              @select="getChoose"
              clearable
            ></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件号码" prop="idCard">
            <el-input
              v-model="searchData.idCard"
              placeholder="请输入证件号码"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预约号" prop="appointmentId">
            <el-input
              v-model="searchData.appointmentId"
              placeholder="请输入预约号"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="tel">
            <el-autocomplete
              v-model="searchData.tel"
              :fetch-suggestions="getTelData"
              placeholder="请输入手机号码"
              @select="getChoose"
              clearable
            ></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
            <el-button type="primary" @click="add">快速建档</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <el-table
      :data="dataList"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      v-show="dataList.length > 0"
    >
      <el-table-column label="id" prop="id" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="name" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="性别" prop="gender" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.gender | showGender }}</span>
        </template>
      </el-table-column>

      <el-table-column label="手机号码" prop="tel" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.tel | hideTel }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="证件号码"
        prop="idCard"
        align="center"
        width="200"
      >
        <template slot-scope="{ row }">
          <span>{{ row.idCard | hideInfo }}</span>
        </template>
      </el-table-column>

      <el-table-column label="生日" prop="birth" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.birth }}</span>
        </template>
      </el-table-column>

      <el-table-column label="地址" prop="addr" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.addr }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" prop="id" align="center">
        <template slot-scope="{ row }">
          <el-button type="primary" @click="fastTreat(row)">快速接诊</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-show="dataList.length > 0"
      :page-size="searchData.pageSize"
      layout="prev, pager, next"
      :total="searchData.totalCount"
      @prev-click="submitForm(-1)"
      @next-click="submitForm(1)"
    ></el-pagination>

    <el-dialog :visible.sync="dialogVisible" @close="onClose" title="快速建档">
      <el-form ref="addForm" :model="addData" :rules="addRules" size="medium" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addData.name " placeholder="请输入姓名" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="addData.gender " placeholder="请选择性别" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in genderOptions" :key="index" :label="item.label"
                       :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码" prop="tel">
          <el-input v-model="addData.tel" placeholder="请输入手机号码" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="证件号码" prop="idCard ">
          <el-input v-model="addData.idCard " placeholder="请输入证件号码" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input v-model="addData.addr" placeholder="请输入地址" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="生日" prop="birth ">
          <el-date-picker v-model="addData.birth " format="yyyy-MM-dd " value-format="yyyy-MM-dd "
                          :style="{width: '100%'}" placeholder="请选择生日" clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="备注信息" prop="remark ">
          <el-input v-model="addData.remark " placeholder="请输入备注信息" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import {getPatients, addPatients} from "@/api/patient";
  import {fastReception} from "@/api/treat"

  let gender = {1: "男", 2: "女"};
  export default {
    components: {},
    props: [],
    data() {
      return {
        dataList: [],
        searchData: {
          name: "",
          idCard: "",
          appointmentId: "",
          tel: "",
          page: 0,
          totalCount: 0,
          totalPage: 1,
          pageSize: 10
        },
        dialogVisible: false,
        addData: {
          name: "",
          gender: "",
          tel: "",
          idCard: "",
          addr: "",
          birth: '',
          remark: "",
        },
        addRules: {
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          gender: [{
            required: true,
            message: '请选择性别',
            trigger: 'change'
          }],
          tel: [{
            required: true,
            message: '请输入手机号码',
            trigger: 'blur'
          }, {
            pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
            message: '手机号码格式错误',
            trigger: 'blur'
          }],
          idCard: [],
          addr: [],
          birth: [],
          remark: [],
        },
        genderOptions: [{
          "label": "男",
          "value": 1
        }, {
          "label": "女",
          "value": 2
        }],
      };
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
    },
    filters: {
      showGender(d) {
        return gender[d];
      },
      hideTel(tel) {
        var reg = /^(\d{3})\d{4}(\d{4})$/;
        return tel.replace(reg, "$1****$2");
      },
      hideInfo(idcard) {
        if (!idcard || idcard.length === 0) {
          return ""
        }
        // 15位身份证举例：130503 670401 001的含义; 13为河北，05为邢台，03为桥西区，出 生日期为1967年4月1日，顺序号为001。
        else if (idcard.length === 15) {
          return idcard.replace(/(\d{6})\d{6}(\d{3})/, "$1******$2");
        } else {
          return idcard.replace(/(\d{5})\d{6}(\d{6})/, "$1******$2");
        }
      }
    },
    methods: {
      fastTreat(patient) {
        fastReception({pid:patient.id}).then(response => {
          if(response.code === 200){
            this.$router.push({
              name: 'treatProject',
              params: {
                patient: patient,
                clinicNo:response.clinicNo,
                treat:response.treat
              }
            })
          }

        })

      },
      geTel(tel) {
        var reg = /^(\d{3})\d{4}(\d{4})$/;
        return tel.replace(reg, "$1****$2");
      },
      remote(data, cb) {
        let _that = this;
        getPatients(data).then(response => {
          if (response.code === 200) {
            let data = response.page.list;
            data.filter(function (a) {
              a.value = a.name + "-" + _that.geTel(a.tel);
            });
            cb(data);
          }
        });
      },
      //查询病人信息select
      getNameData(queryString, cb) {
        this.remote({name: queryString}, cb);
      },
      //查询病人信息select
      getTelData(queryString, cb) {
        this.remote({tel: queryString}, cb);
      },
      add() {
        this.dialogVisible = true
      },
      //获取病人名字查询
      getChoose(val) {
        this.searchData = val;
        this.searchData.tel = this.geTel(val.tel);

        if (!val.idCard || val.idCard.length === 0) {
          this.searchData.idCard = ""
        }
        // 15位身份证举例：130503 670401 001的含义; 13为河北，05为邢台，03为桥西区，出 生日期为1967年4月1日，顺序号为001。
        else if (val.idCard.length === 15) {
          this.searchData.idCard = idcard.replace(/(\d{6})\d{6}(\d{3})/, "$1******$2");
        } else {
          this.searchData.idCard = val.idCard.replace(/(\d{5})\d{6}(\d{6})/, "$1******$2");
        }
        this.searchData.page = 0;
        this.searchData.pageSize = 10;
        this.dataList = [val];
      },
      submitForm(n) {
        if (typeof n === "number") {
          this.searchData.page = this.searchData.page + n;
        }
        this.$refs["searchForm"].validate(valid => {
          if (!valid) return;
          // TODO 提交表单
          getPatients(this.searchData).then(response => {
            if (response.code === 200) {
              this.dataList = response.page.list;
              this.searchData.page = response.page.currPage;
              this.searchData.totalPage = response.page.totalPage;
              this.searchData.totalCount = response.page.totalCount;
            }
          });
        });
      },
      resetForm() {
        this.$refs["searchForm"].resetFields();
        this.dataList = [];
        this.searchData.page = 0;
        this.searchData.pageSize = 10;
      },
      onClose() {
        this.$refs['addForm'].resetFields()
      },
      close() {
        this.$emit('update:visible', false)
      },
      handelConfirm() {
        this.$refs['addForm'].validate(valid => {
          if (!valid) return
          addPatients(this.addData).then(response => {
            if (response.code === 200) {
              this.$message({
                showClose: true,
                message: response.msg,
                type: "success"
              });
              this.searchData = response.data
              this.searchData.tel = "";
              this.searchData.idCard = "";
              this.searchData.page = 0;
              this.searchData.pageSize = 10;
              this.dataList = [response.data]
              this.dialogVisible = false
            }
          })
          this.close()
        })
      },
    }
  };
</script>
<style>
  .el-autocomplete {
    width: 100%;
  }
</style>
